{% extends 'no_4/base.html' %}

{% block style_custom %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .registerwindow {
            margin: 0 auto;
            width: 350px;
            height: 200px;
            background: rgba(5, 55, 148, 0.5);
        }

        .title {
            margin: 0 auto;
            font-size: 30px;
            text-align: center
        }

        .item {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
        }

        .text {
            text-align: center;
            width: 80px;
        }

        input {
            width: 140px;
        }

        button {
            width: 80px;
            margin-left: 5px;
        }
    </style>
{% endblock %}

{% block body_base %}
    <div id="app">
        <h1>{{ title }}</h1>
        <div class="registerwindow">
            <div class="title">用户注册</div>
            <div class="item">
                <div class="text">用户名:</div>
                <input type="text" v-model="username">
            </div>
            <div class="item">
                <div class="text">密码:</div>
                <input type="text" v-model="pwd">
            </div>
            <div class="item">
                <div class="text">邮箱:</div>
                <input type="text" v-model="email">
            </div>
            <div class="item">
                <div class="text">手机号:</div>
                <input type="text" v-model="phone">
                <button :disabled="disabled" @click="authPhone">{[ codebtn ]}</button>
            </div>
            <div class="item">
                <div class="text">验证码:</div>
                <input type="text" v-model="code">
                <button @click="authUserinfo">确认注册</button>
            </div>
        </div>

        <v-active :email='email'></v-active>
    </div>
{% endblock %}



{% block script_custom %}
    <script>
        var Axios = window.axios;

        var ActiveComponent = {
            template: '<div>\n' +
                '        <h1>{{title}}</h1>\n' +
                '        <button @click="sendcode">认证激活</button>\n' +
                '    </div>',
            data() {
                return {
                    title: '认证激活组件',
                }
            },
            props: ['email'],
            methods: {
                sendcode() {
                    //   alert(this.email)
                    var api = 'http://127.0.0.1:8000/no_4/sendactivecode/';
                    Axios.get(api, {
                            params: {
                                email: this.email
                            }
                        }
                    ).then((Response) => {
                        console.log(Response.data)
                        // 根据返回的信息，做出响应的提示
                    }).catch((error) => {
                        console.log(error)
                    })
                }
            }
        };

        new Vue({
            el: '#app',
            delimiters: ["{[", "]}"],
            name: 'app',
            data() {
                return {
                    title: '首页',
                    disabled: false,
                    time: 0,
                    codebtn: '获取验证码',
                    phone: '',
                    username: '',
                    pwd: '',
                    code: '',
                    email: ''
                }
            },
            methods: {
                getCode() {
                    //用来向后台发送请求获取验证码
                    var api = 'http://127.0.0.1:8000/no_4/sendcode/';
                    Axios.get(api, {
                        params: {
                            phone: this.phone
                        }
                    }).then((Response) => {
                        console.log(Response.data)
                        // 根据返回的信息，做出响应的提示
                    }).catch((error) => {
                        console.log(error)
                    })
                },
                goRegister() {
                    //提交完整的注册信息
                    var api = 'http://127.0.0.1:8000/no_4/register/';
                    Axios.get(api, {
                            params: {
                                phone: this.phone,
                                username: this.username,
                                pwd: this.pwd,
                                code: this.code,
                                email: this.email
                            }
                        }
                    ).then((Response) => {
                        console.log(Response.data)
                        // 根据返回的信息，做出响应的提示
                    }).catch((error) => {
                        console.log(error)
                    })
                },
                authPhone() {
                    var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                    if (this.phone === '') {
                        alert("请输入手机号码");
                    } else if (!reg.test(this.phone)) {
                        alert("手机格式不正确");
                    } else {
                        this.time = 60;
                        this.disabled = true;
                        this.timer();
                        this.getCode();
                    }
                },
                timer() {
                    if (this.time > 0) {
                        this.time--;
                        this.codebtn = this.time + "s";
                        setTimeout(this.timer, 1000);
                    } else {
                        this.time = 0;
                        this.codebtn = "获取验证码";
                        this.disabled = false;
                    }
                },
                authUserinfo() {
                    if (this.username === '') {
                        alert("用户名不能为空");
                    } else if (this.pwd === '') {
                        alert("密码不能为空");
                    } else if (this.phone === '') {
                        alert("手机号码不能为空");
                    } else if (this.code === '') {
                        alert("验证码不能为空");
                    } else {
                        this.goRegister();
                    }
                }
            },
            components: {
                // 这里是邮箱认证注册，但是由于这里重点是后端实现，前端这里后续交互自行实现
                'v-active': ActiveComponent
            },
        });
    </script>
{% endblock %}
